<template>
	<div class="news_list">
		<span class="loading" v-if="newsData.length === 0 && !requestEend">努力拉取数据中...</span>
		<span class="loading" v-if="newsData.length === 0 && requestEend">暂无信息，请稍候重试...</span>
		<ul>
			<li v-for="(item, index) in newsData" v-if="newsData.length>0" class="fadeIn animated">
				<!--router-link :to="{name:'news-detail',params:{cid: item.channelId, cname:item.channel, datetime: item.newsTime, id: item.newsId, title:item.newsTitle, alias:'/news'}}" v-if="item.type === 'news' && index % 2 !== 0">
					<div class="news_list_pic">
						<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.newsPic" />
					</div>
					<div class="news_list_item">
						<h1>{{item.newsTitle}}</h1>
						<p>
							<span>{{item.Media}}</span>
							<span>{{item.newsTime}}</span>
						</p>
					</div>
				</router-link-->
				<router-link :to="{name:'news-detail',params:{cid: item.channelId, cname:item.channel, datetime: item.newsTime, id: item.newsId, title:item.newsTitle, alias:'/news'}}" v-if="item.type === 'news'">
					<div class="news_list_item">
						<h1>{{item.newsTitle}}</h1>
						<p>
							<span>{{item.Media}}</span>
							<span>{{item.newsTime}}</span>
						</p>
					</div>
					<div class="news_list_pic">
						<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.newsPic" />
					</div>
				</router-link>
				<component :is="newsListComponent" v-if="item.type === 'ad'" :id="index"></component>
			</li>
		</ul>
		<a @click="getMoreNews($event)" class="more" v-if="newsData.length>=10 && count < 3">加载更多</a>
	</div>
</template>

<script>
	import LazyImg from "../../components/common/lazy-img.vue";
	export default {
		name:"Newlist",
		props:["news", "channelTitle", "channelId", "newsListAd", "channelNewsCount"],
		data:function(){
			return {
				newsData:[],
				requestEend: false,
				count: 0,
				newsListComponent: r => require.ensure([], () => r(require('../../components/ad/newslist-ad.vue')), "newsListAdItem")
			}
		},
		components:{
			LazyImg
		},
		methods:{
			getMoreNews: function(e){
				let that = this;
				let count = that.count+1;
				//console.log(count)
				if (count >3){
					return;
				}
				let defaultData = that.$store.state.defaultData;

				let data = [];
				defaultData.data.length = that.channelNewsCount || 30;
				defaultData.data.each(function(i, item) {
					if (i % 5 === 0 && that.newsListAd.indexOf(i) > -1) {
						data.push({
							type: "ad",
							id: i
						});
					}
					if (item){
						let time = item.newsUrl && /\/([0-9]+\-[0-9]+\-[0-9]+)\//.exec(item.newsUrl)[1] || "",
							newsPic = "https://minimg.hexun.com/" + item.newsPicture.replace(/http[s]*\:\/\//gim, "").replace(/\.(jpg|gif|png)/gim, "_c110x90.$1");
						data.push({
							newsId: item.itemid.replace("c_",""),
							newsPic: newsPic,
							newsTitle: item.title,
							newsTime: time || "",
							Media: item.mediaName,
							channel: encodeURIComponent(that.channelTitle || that.$route.params.cname),
							channelId: that.channelId || that.$route.params.cid,
							type: "news"
						})
					}
				});
				//console.log(data)
				that.$set(that, "newsData", that.newsData.concat(data));
				that.$set(that, "count", count);


				/*
				that.$http.jsonp(this.$store.state.api.newsListApi).then(function(res){
					//console.log(res)
					if (res.body.data && res.body.data.length > 0){
						let data = [];
						res.body.data.length = that.channelNewsCount || 30;
						res.body.data.each(function(i, item) {
							if (i % 5 === 0 && that.newsListAd.indexOf(i) > -1) {
								data.push({
									type: "ad",
									id: i
								});
							}
							if(item){
								let time = item.entitytime && /([0-9]+\-[0-9]+\-[0-9]+)\s+/.exec(item.entitytime)[1] || "",
									newsPic = "https://minimg.hexun.com/" + item.newsmatchpic.replace(/http[s]*\:\/\//gim, "").replace(/\.(jpg|gif|png)/gim, "_c110x90.$1");
								data.push({
									newsId: item.id,
									newsPic: newsPic,
									newsTitle: item.title,
									newsTime: time || "",
									Media: item.medianame,
									channel: encodeURIComponent(that.channelTitle),
									channelId: that.channelId,
									type: "news"
								})
							}
						});
						//console.log(data)
						that.$set(that, "newsData", that.newsData.concat(data));
						that.$set(that, "count", count);
					}else{
						that.$http.jsonp(that.$store.state.api.newsListBackApi.tmpl({
							id:"195509106"
						})).then(function(res){
							if (res.body.data && res.body.data.length > 0){
								let data = [];
								res.body.data.length = that.channelNewsCount || 30;
								res.body.data.each(function(i, item) {
									if (i % 5 === 0 && that.newsListAd.indexOf(i) > -1) {
										data.push({
											type: "ad",
											id: i
										});
									}
									if (item){
										let time = item.newsUrl && /\/([0-9]+\-[0-9]+\-[0-9]+)\//.exec(item.newsUrl)[1] || "",
											newsPic = "https://minimg.hexun.com/" + item.newsPicture.replace(/http[s]*\:\/\//gim, "").replace(/\.(jpg|gif|png)/gim, "_c110x90.$1");
										data.push({
											newsId: item.itemid.replace("c_",""),
											newsPic: newsPic,
											newsTitle: item.title,
											newsTime: time || "",
											Media: item.mediaName,
											channel: encodeURIComponent(that.channelTitle),
											channelId: that.channelId,
											type: "news"
										})
									}
								});
								//console.log(data)
								that.$set(that, "newsData", that.newsData.concat(data));
								that.$set(that, "count", count);
							}
						}, function(){
							that.$set(that, "requestEend", true);
						})
					}
				},function(){
					that.$set(that, "requestEend", true);
				})*/
			}
		},
		created: function(){
			let that = this;
			that.getMoreNews();
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.news_list{
		span{
			&.loading{
				display:block;
				text-align: center;
				font-size: 20/@base;
				margin:100/@base auto 0 auto;
			}
		}
		ul{
			li{
				margin:5/@base 0;
				padding:10/@base 20/@base;
				background-color: #fff;
				a{
					display:flex;
					color:#000;
					div{
						&.news_list_pic{
							width:120*2/@base;
							height:65*2/@base;
							overflow:hidden;
							background-color:#666;
							margin:0 0 0 10/@base;
							img{
								border:0;
								width:100%;
								height:100%;
							}
						}
						&.news_list_item{
							width:99%;
							margin:0 10/@base 0 0;
							h1{
								font-size: 24/@base;
								height:70/@base;
								overflow:hidden;
								font-weight: 400;
								margin:5/@base 0 15/@base 0;
							}
							p{
								display:flex;
								padding:10/@base 0 0;
								span{
									width:50%;
									font-size: 14/@base;
									color:#666;
									&:last-child{
										text-align: right;
									}
								}
							}
						}
					}
				}
			}
		}
		.more{
			display:block;
			padding:20/@base 20/@base;
			margin:10/@base auto 0 auto;
			text-align: center;
			font-size:14/@base;
			background-color: #fff;
			color:#999;
		}
	}
</style>
